<template>
  <div class="box">
    <div class="title">快捷入口</div>
    <div class="button-box">
      <div
        class="button-item"
        v-for="entrance in entrances"
        :key="entrance.name"
        @click="handleClick(entrance)"
      >
        <div class="items-color" :style="{ backgroundColor: entrance.color }">
          <img :src="entrance.icon" style="width: 50%; height: auto" />
        </div>
        <span>{{ entrance.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
defineProps({
  entrances: {
    type: Array,
    default: () => []
  }
})

function handleClick(item) {
  // 优先执行自定义函数
  if (item.function && typeof item.function === 'function') {
    item.function()
    return
  }
  if (item.action && typeof item.action === 'function') {
    item.action()
    return
  }
  // 其次按路径跳转
  if (item.path) {
    router.push(item.path)
  }
}
</script>

<style lang="scss" scoped>
$padding: 12px;
$border-radius: 10px;
$border-bottom: 1px solid #e5e5e5;
$full-height: calc(100dvh - 84px);
.box {
  background-color: #ffff;
  border-radius: $border-radius;
  margin: 8px;
  height: calc(($full-height - 32px) * 0.4);
  display: flex;
  flex-direction: column;
  .title {
    font-size: 20px;
    font-weight: bold;
    color: var(--el-color-primary);
    padding: $padding;
    border-bottom: $border-bottom;
    flex-shrink: 0;
  }
}

.button-box {
  display: flex;
  flex-wrap: wrap;      /* 超过自动换行 */
  gap: 3%;
  width: 100%;
  height: 100%;
  padding: $padding;
}

.button-item {
  flex: 0 0 30%;        /* 每个占30%，一行3个 */
  /* 也可以用：width: 30%; 保持等效 */
  border: #e0e0e0 0.5px solid;
  border-radius: 10px;
  height: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
}

.button-item:hover {
  background-color: #f8f7f7;
  transform: scale(1.05);
  cursor: pointer;
}

.items-color {
  background-color: #dbeafe;
  width: 20%;
  height: 40%;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s;
}

.items-color:hover {
  background-color: #e0e0e0;
}

.button-item img {
  display: block;
  margin: 1 auto 10px;
}

.button-item span {
  display: block;
  font-size: 14px;
  color: #333;
  margin-top: 4%;
}
</style>
